<script setup lang="ts">
/*
  父子传值（js）
     父传子
        <xxx 属性名="值" />
        xxx.vue
           const props=defineProps({
            属性名:{
              type,
              default,
                  简单数据类型：直接写
                  复杂数据类型：()=>复杂数据类型
              required,
              validator
            }
           })
      子传父
           <xxx @方法名="父组件方法" />
           子组件内:
              const emits=defineEmits(['方法名'])
              emits('方法名',参数)

   父传子(ts)
     <xxx 属性名=值  />
     子组件内
       defineProps<{
        属性名:类型  // 必传
        属性名?:类型  // 非必传
       }>()

       ts:父传子默认值处理
       withDefaults(defineProps(...),{
        属性名:默认值
       })
   
     用js写法去适配ts写法
    const props=definrProps({
      属性名:{
        type:Number as PropType<0 | 1>,   
        default:...
      }
    })

  ts 处理子传父
    <son  @方法名="父组件方法" />
    子组件内接收父绑定子的方法
    js: const emits=defineEmits(['方法名'])
        emits('方法名',实参)
    ts: const emits=defineEmits<{
      (e:'方法名',x:number):void
    }>()
      emits('方法名',实参)


*/
import { ref } from 'vue'
import HmSon from './components/HmSon.vue'
const money = ref(1000)
const setMoney = (step: number): void => {
  money.value = money.value + step
}
</script>

<template>
  <div class="app-page">app</div>
  <HmSon :money="money" :gender="1" @sonSetMoney="setMoney"></HmSon>
  <!-- <HmSon></HmSon> -->
</template>

<style lang="scss" scoped></style>
